<template>
  <div id="app">
    <!-- 原来的header -->
    <!-- <div class="header">
      <ul>
        <li>商品管理</li>
        <li>商品分类</li>
        <div class="user-info">
          <img src="./assets/account.png" alt="">
          <span>美业</span>
          <span class="mui-icon mui-icon-arrowdown" @click="logOutShow()"></span>
          <div class="logOutShow" v-show="isShow">
            <input type="button" value="修改密码"> 
            <input type="button" @click="logOut()" value="安全退出"> 
          </div>
          </div>
      </ul>
    </div> -->
    <!-- 改变后的只有userinfo -->
    <div class="user-info">
          <img src="./assets/account.png" alt="">
          <span>美业</span>
          <span class="mui-icon mui-icon-arrowdown" @click="logOutShow()"></span>
          <div class="logOutShow" v-show="isShow">
            <input type="button" value="修改密码"> 
            <input type="button" @click="logOut()" value="安全退出"> 
          </div>
    </div>
    <div class="nav">
          <ul>
            <li><a href="javascript:;"><img src="./assets/logo.png" alt=""></a></li>
            <li><router-link to="/index">管理首页</router-link></li>
            <li>
              <router-link to="/product">商品管理</router-link>
            </li>
            <li>业务管理</li>
            <li>营销管理</li>
            <li>用户管理</li>
            <li>报表统计</li>
            <li>商家设置</li>
            <li>功能插件</li>
          </ul>
      </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
  name: 'app',
  data(){
    return{
      isShow:false
    }
  },
  methods:{
    logOutShow(){
      this.isShow=!this.isShow;
      console.log(11)
    },
    logOut(){
      var url='http://192.168.1.216/public/index.php/Home/login/logout';
      this.$http.post(url,{},{ emulateJSON: true }).then(function(res){
        console.log(res.body)
        if(res.body.status==1){
          Toast(res.body.msg);
          this.isShow=false;
          this.$router.push('/');
        }
      })

      
    }
  }
}
</script>

<style lang='less' scoped>
*{
  padding: 0;
  margin: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  // margin-top: 60px;
}
.nav{
    background-color: #f1f1ff;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 220px;
    height: 780px;
    border: 1px solid #ccc;
    border-bottom: none;
    ul{
      li{
        list-style: none;
        width: 220px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;
        &:hover{
          background-color:burlywood; 
        }
      }
      li:nth-of-type(1){
          height: 101px;
          a{
            img{
              display: inline-block;
              width: 145px;
              height: 58px;
              margin-top: 20px;
            }
          }
        }
    }
  }
  // .header{
  //   height: 80px;
  //   width: 100%;
  //   position: absolute;
  //   top:0px;
  //   left: 0px;
  //   padding-left: 220px;
  //   ul{
  //   background: #f1f1f1;
  //   height: 80px;
  //     li{
  //       padding-left: 20px;
  //       list-style: none;
  //       height: 80px;
  //       line-height: 80px;
  //       float: left;
  //     }
  //     .user-info{
  //       float: right;
  //       display: block;
  //       width: 160px;
  //       height: 80px;
  //       line-height: 80px;
  //       text-align: center;
  //       img{
  //         width: 40px;
  //         height: 40px;
  //         vertical-align: middle;
  //       }
  //       .logOutShow{
  //         border-radius:10px; 
  //         position: relative;
  //         z-index: 1000;
  //         line-height: 0;
  //         input{
  //           line-height: 20px;
  //         }
  //       }
  //     }
      
  //   }
  // }
  .user-info{
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 999;
        display: block;
        width: 160px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        img{
          width: 40px;
          height: 40px;
          vertical-align: middle;
        }
        .logOutShow{
          border-radius:10px; 
          position: relative;
          z-index: 1000;
          line-height: 0;
          input{
            line-height: 20px;
          }
        }
      }
</style>
